<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, defineProps } from 'vue'
import * as Cesium from 'cesium'
import h337 from 'heatmap.js'
import { soundDataList, saltDataList, densityDataList, tempDataList } from '@/api/3d'
import measureLineSpace from "@/utils/measure.js"
// 观测网络
const prop = defineProps(['networkTree', 'lineArr'])
import TooltipDiv from "./tooltip.js";
import CesiumHeatMap3D from 'cesiumheatmap3d';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI1NzQyYS00NjA0LTQ1OGQtOGU0Ni1jZTk5ODY2NGM2NjkiLCJpZCI6MjE4MDQ0LCJpYXQiOjE3MTY3OTI3OTN9.2Tjns8eg13V53NnIRIJRClnIkrv9gqFAY_OyUDB9N-M'

let viewerRef = null;
let heatmapRef = null;
let sceneRef = null;
let heatMapInstance = null;
const colors = ["rgb(0,0,255)", "rgb(0,255,0)", "rgb(255,255,0)", "rgb(255,0,0)"];
let dvalue = ref("")
let maxValue = ref(40);
let minValue = ref(0);

let pointPrimitiveCollection = null;

const getValueColor = function (value) {
  let r = 0;
  let g = 0;
  let b = 0;
  let bfb = (value - minValue.value) / (maxValue.value - minValue.value);
  if (bfb > 1) bfb = 1
  if (bfb < 0) bfb = 0
  if (bfb > 0.66) {
    r = 255;
    g = Math.ceil(255 * (1 - ((bfb - 0.66) / 0.34)));
    b = 0;
  }else if (bfb > 0.33) {
    r = Math.ceil(255 * ((bfb - 0.33) / 0.33));
    g = 255
    b = 0;
  } else {
    r = 0;
    g = Math.ceil(255 * (bfb / 0.33))
    b = Math.ceil(255 * (1 - (bfb / 0.33)));
  }
  return `rgba(${r},${g},${b},0.6)`
}

const emit = defineEmits(['updateLonLat'])

onMounted(async () => {
  viewerRef = new Cesium.Viewer('cesiumContainer', {
    animation: false, //是否创建动画小器件，左下角仪表
    timeline: false, //是否显示时间线控件
    fullscreenButton: false, //右下角全屏按钮
    vrButton: false, //右下角vr虚拟现实按钮

    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false, //是否显示投影方式控件
    homeButton: false, //回到默认视域按钮
    navigationHelpButton: false, //是否显示帮助信息控件

    baseLayerPicker: false, //是否显示图层选择控件

    // 2d 3d 切换
    terrainProvider: await Cesium.createWorldBathymetryAsync({
      requestVertexNormals: true
    }),
    orderIndependentTranslucency: false,
    contextOptions: {
      webgl: {
        alpha: true
      }
    }
  })


// 观测网络 start
  // 初始化Tooltip 
  TooltipDiv.initTool(viewerRef.cesiumWidget.container);
  // 创建ScreenSpaceEventHandler处理鼠标移动事件
  var handler = new Cesium.ScreenSpaceEventHandler(viewerRef.canvas);
  handler.setInputAction(function(movement) {
      var pick = viewerRef.scene.pick(movement.endPosition);
      if (Cesium.defined(pick) && pick.primitive) {
        if(pick.id?._data?.showTooltip) {
          TooltipDiv.show(movement.endPosition, '<table style="min-width: 200px;"><tr>'
          + '<td width="50">名称：</td><td class="w-auto">' + pick.id._data.label + '</td></tr><tr>'
          + '<td width="50">位置：</td><td class="w-auto">' + pick.id._data.position + '</td></tr>'
          + '</table>');
          viewerRef.canvas.style.cursor = "pointer"; // 鼠标悬停在 billboard 上时显示手形光标
        } else {
        TooltipDiv.show(movement.endPosition, pick.primitive.tooltip);
        viewerRef.canvas.style.cursor = "pointer";
        }
      }else if (Cesium.defined(pick) && pick.id !== TooltipDiv) {
        if(pick.id?._data?.showTooltip) {
          TooltipDiv.show(movement.endPosition, '<table style="min-width: 200px;"><tr>'
          + '<td width="50">名称：</td><td class="w-auto">' + pick.id._data.label + '</td></tr><tr>'
          + '<td width="50">位置：</td><td class="w-auto">' + pick.id._data.position + '</td></tr>'
          + '</table>');
          viewerRef.canvas.style.cursor = "pointer"; // 鼠标悬停在 billboard 上时显示手形光标
        } else {
          TooltipDiv.hide(false);
        }
      } else {
        TooltipDiv.hide(false);
        viewerRef.canvas.style.cursor = "default"; // 否则显示默认光标
      }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  const deviceArr = []
  const initWork = () => {
    // 循环画出所有的点 + 弹窗
    // 海洋【不用循环】
    // addFeature(prop.networkTree, 1)
    prop.networkTree.forEach((firstItem) => {
      // 平台
      addFeature(firstItem.children, 2)
      firstItem.children.forEach((secondItem) => {
        // 设备
        deviceArr.push(...secondItem.children)
      })
    })

    addFeature(deviceArr, 3)

    // 循环画出所有的线
    for (let i = 0; i < prop.lineArr.length; i++) {
      let item = prop.lineArr[i]
      for (let j = 0; j < item.length; j++) {
        viewerRef.entities.add({
          name: '光缆',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(item[j]),
            width: 3,
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.WHITE,
              outlineWidth: 0,
              outlineColor: Cesium.Color.WHITE,
            })
          }
        })
      }
    }

    var dataSource
    // 添加不同颜色的点和tooltip
    function addFeature(arr, order) {
      dataSource = new Cesium.CustomDataSource()
      for (var i = 0, len = arr.length; i < len; i++) {
        var item = arr[i]


        //添加实体
        // 平台
        if(order == 2) {
          dataSource.entities.add({
            name: item.label,
            position: Cesium.Cartesian3.fromDegrees(item.position[0], item.position[1]),
            point: {
              color: Cesium.Color.fromCssColorString('#ff4400'),
              pixelSize: 30 - 8,
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 4,
              // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            },
            data: item,
          })
        }
        // 设备
        else if(order == 3) {
          dataSource.entities.add({
            name: item.label,
            position: Cesium.Cartesian3.fromDegrees(item.position[0], item.position[1]),
            point: {
              color: Cesium.Color.WHITE,
              pixelSize: 30 - 8,
              outlineColor: Cesium.Color.fromCssColorString('#000000'),
              outlineWidth: 4,
              // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            },
            data: item,
          })
        }

      }

      //========聚合 start==========
      dataSource.clustering.enabled = true
      dataSource.clustering.pixelRange = 20 //多少像素矩形范围内聚合

      dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
        var count = clusteredEntities.length
        cluster.label.show = false
        cluster.billboard.show = true
        cluster.billboard.id = cluster.label.id
        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
        drawClusterBillboard(cluster.billboard, count, '', clusteredEntities)
      })
      //========聚合 end==========

      viewerRef.dataSources.add(dataSource)
    }



    // 绘制聚合点
    function drawClusterBillboard(billboard, size, label, clusteredEntities) {
      if (!label) {
        label = size
      }

      let sizeInner = 30
      // 放大倍数（放大后会再缩小回去，倍数越高图片会越清晰一些。）
      let scale = 2
      sizeInner *= scale
      // sizeInner += 4 * scale;
      // 创建画布对象
      let canvas = document.createElement('canvas')
      canvas.width = sizeInner
      canvas.height = sizeInner
      let ctx = canvas.getContext('2d')
      // 渲染圆圈
      ctx.arc(sizeInner / 2, sizeInner / 2, sizeInner / 2 - 2 * scale, 0, 2 * Math.PI)

      ctx.fillStyle = 'rgba(255, 255, 255, 1)'
      ctx.strokeStyle = '#000000'

      ctx.lineWidth = (2 + 2) * scale
      ctx.fill()
      ctx.stroke()
      // 渲染字体
      ctx.fillStyle = '#000000'
      ctx.font = 'normal ' + (20 - 5) * scale + 'px sans-serif'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(label, sizeInner / 2, sizeInner / 2 + 2 * scale)
      billboard.image = canvas
      billboard.scale = 1 / scale

      //增加参数
      billboard.id = {
        type: 'cluster',
        clusteredEntities
      }
    }
  }
  initWork()
  // 观测网络 end

  // 添加点击事件监听器
  var handler = new Cesium.ScreenSpaceEventHandler(viewerRef.scene.canvas)
  handler.setInputAction(function (click) {
    // 获取点击位置的经纬度
    var pickedObject = viewerRef.scene.pickPosition(click.position)
    if (Cesium.defined(pickedObject)) {
      var cartesian = viewerRef.scene.pickPosition(click.position)
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      var longitude = Cesium.Math.toDegrees(cartographic.longitude)
      var latitude = Cesium.Math.toDegrees(cartographic.latitude)
      // lon.value = longitude
      // lat.value = latitude
      emit('updateLonLat', [longitude, latitude])
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  viewerRef.imageryLayers.remove(viewerRef.imageryLayers.get(0))

  // 叠加影像服务
  var imgMap = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t4.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6fff081965d4bf0bf850c2b6e94c82f4',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
  })
  viewerRef.imageryLayers.addImageryProvider(imgMap)

  // 叠加影像服务
  var imgMap2 = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t5.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6fff081965d4bf0bf850c2b6e94c82f4',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
  })
  viewerRef.imageryLayers.addImageryProvider(imgMap2)

  sceneRef = viewerRef.scene

  // prevent aliasing from countour lines
  sceneRef.msaaSamples = 4

  const globe = sceneRef.globe
  globe.enableLighting = true
  globe.maximumScreenSpaceError = 1.0 // Load higher resolution tiles for better seafloor shading

  // Light the scene with a hillshade effect similar to https://pro.arcgis.com/en/pro-app/latest/tool-reference/3d-analyst/how-hillshade-works.htm
  sceneRef.light = new Cesium.DirectionalLight({
    direction: new Cesium.Cartesian3(1, 0, 0) // Updated every frame
  })
  sceneRef.verticalExaggeration = 1

  const camera = sceneRef.camera
  const cameraMaxHeight = globe.ellipsoid.maximumRadius * 2
  const scratchNormal = new Cesium.Cartesian3()
  sceneRef.preRender.addEventListener(function (scene, time) {
    const surfaceNormal = globe.ellipsoid.geodeticSurfaceNormal(camera.positionWC, scratchNormal)
    const negativeNormal = Cesium.Cartesian3.negate(surfaceNormal, surfaceNormal)
    scene.light.direction = Cesium.Cartesian3.normalize(
      Cesium.Cartesian3.add(negativeNormal, camera.rightWC, surfaceNormal),
      scene.light.direction
    )
    const zoomMagnitude = Cesium.Cartesian3.magnitude(camera.positionWC) / cameraMaxHeight
    updateGlobeMaterialUniforms(zoomMagnitude)
  })
  // Globe materials
  let showContourLines = true
  let invertContourLines = true
  const countourLineSpacing = 500.0
  function updateGlobeMaterialUniforms(zoomMagnitude) {
    const material = globe.material
    if (!Cesium.defined(material)) {
      return
    }

    const spacing = 5.0 * Math.pow(10, Math.floor(4 * zoomMagnitude))
    if (showContourLines) {
      const uniforms = material.uniforms

      uniforms.spacing = spacing * sceneRef.verticalExaggeration
    }
  }

  function updateGlobeMaterial() {
    let material
    if (showContourLines) {
      material = Cesium.Material.fromType('ElevationContour')
      const shadingUniforms = material.uniforms
      shadingUniforms.width = 1.0
      shadingUniforms.spacing = countourLineSpacing * sceneRef.verticalExaggeration
      shadingUniforms.color = invertContourLines ? Cesium.Color.WHITE : Cesium.Color.BLACK
      globe.material = material
      return
    }
    globe.material = material
  }
  updateGlobeMaterial()
})

onBeforeUnmount(() => {
  // if (pointPrimitiveCollection != null && !pointPrimitiveCollection.isDestroyed()) {
  //   pointPrimitiveCollection.destroy()
  // }
  if (viewerRef && Cesium.defined(viewerRef)) {
    viewerRef.entities.removeAll()
    viewerRef.imageryLayers.removeAll()
    viewerRef.dataSources.removeAll()
    // viewer.scene.primitives.removeAll();
    // 获取webgl上下文
    let gl = viewerRef.scene.context._originalGLContext;
    gl.canvas.width = 1;
    gl.canvas.height = 1;
    viewerRef.destroy(); // 销毁Viewer实例
    gl.getExtension("WEBGL_lose_context").loseContext();
    gl = null;
  }
})

// 定位
const setCameraPosition = (lat, log) => {
  sceneRef.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(log, lat - 1.2, 50000),
    orientation: new Cesium.HeadingPitchRoll(
      6.266986092693175,
      -0.34262046104451316,
      6.283182056027252
    )
  })
}

const setEntityAndReturnDepth0 = (data) => {
  const depth0Arr = [];
  let minlog = 180;
  let minlat = 90;
  let maxlog = -180;
  let maxlat = -90;
  // 新改渲染逻辑
  if (pointPrimitiveCollection == null) {
    pointPrimitiveCollection = viewerRef.scene.primitives.add(new Cesium.PointPrimitiveCollection());
  }
  for (var i = 0; i < data.length; i++) {
    const item = data[i]
    var primitive = pointPrimitiveCollection.add({
      pixelSize: 5,
      color: Cesium.Color.fromCssColorString(getValueColor(item['value'])),
      position: Cesium.Cartesian3.fromDegrees(item['longitude'], item['latitude'], item['depth']),
      // scaleByDistance: new Cesium.NearFarScalar(50, 1.0, 5000, 0.4)
    });
    primitive.tooltip = `${item['value']}${dvalue.value}`;
    if (item['depth'] === 0) {
      depth0Arr.push(item)
    }
    if (item['longitude'] > maxlog) {
      maxlog = item['longitude']
    }
    if (item['longitude'] < minlog) {
      minlog = item['longitude']
    }
    if (item['latitude'] > maxlat) {
      maxlat = item['latitude']
    }
    if (item['latitude'] < minlat) {
      minlat = item['latitude']
    }
  }

  // 根据深度添加内容
  // for (var i = 0; i < data.length; i++) {
  //   const item = data[i]
  //   viewerRef.entities.add({
  //     name: `${item['id']}}`,
  //     position: Cesium.Cartesian3.fromDegrees(item['longitude'], item['latitude'], item['depth']),
  //     point: {
  //       color: Cesium.Color.fromCssColorString(getValueColor(item['value'])),
  //       pixelSize: 10,
  //       outlineWidth: 0,
  //     },
  //     disableClicking: true
  //   })
  //   if (item['depth'] === 0) {
  //     depth0Arr.push(item)
  //   }
  //   if (item['longitude'] > maxlog) {
  //     maxlog = item['longitude']
  //   }
  //   if (item['longitude'] < minlog) {
  //     minlog = item['longitude']
  //   }
  //   if (item['latitude'] > maxlat) {
  //     maxlat = item['latitude']
  //   }
  //   if (item['latitude'] < minlat) {
  //     minlat = item['latitude']
  //   }
  // }
  // 设置热力图
  /* 初始化热力图设置 */
  // 设置随机数据点数量
  let len = depth0Arr.length
  // 构建随机数据点
  let points = []
  // 设置热力图宽度和高度
  let width = 10000
  let height = 10000
  // 将每个点的元素（属性？）转换为创建h337对象即热力图实例所需的数据格式
  for (let i = 0; i < len; i++) {
    // 传进原始数据
    let dataItem = depth0Arr[i]
    let point = {
      // 将数据点经纬度等比例设置成矩形中的x y坐标 值为原始数据的值
      x: Math.floor(((dataItem.latitude - minlat) / (maxlat - minlat)) * width),
      y: Math.floor(((dataItem.longitude - minlog) / (maxlog - minlog)) * height),
      value: dataItem.value
    }
    // 将转换好后的数据存入数组
    points.push(point)
  }
  if (null == heatMapInstance) {
    heatMapInstance = null;
  }
  heatMapInstance = h337.create({
    container: document.querySelector('#heatMap'),
    radius: Math.ceil(Math.sqrt(width * height / len)) * 1.3,
    maxOpacity: 0.5,
    minOpacity: 0.01,
    blur: .8,
    gradient: { 0.1: colors[0], 0.33: colors[1], 0.66: colors[2], 1.0: colors[3]},
  })
  // 设置传入实例的数据
  let pData = {
    max: maxValue.value,
    min: minValue.value,
    data: points
  }
  // 新建热力图实例并传入设置好的数据
  heatMapInstance.setData(pData)
  // 设置画布为生成的热力图
  let canvas = document.getElementsByClassName('heatmap-canvas')

  // 添加热力图实例
  heatmapRef = viewerRef.entities.add({
    name: 'heatmap',
    // 设置矩形
    rectangle: {
      // 指定矩形区域
      coordinates: Cesium.Rectangle.fromDegrees(minlog, minlat, maxlog, maxlat),
      // 设置矩形图片为据透明度的热力图
      material: new Cesium.ImageMaterialProperty({
        image: canvas[0],
        transparent: true
      }),
      height: 0
    }
  })
  // 移动摄像头位置
  setCameraPosition((maxlat - minlat) / 2 + minlat, (maxlog - minlog) / 2 + minlog)
}

let heatmapInstance2 = null;
const setEntityAndReturnDepth0V2 = (data) => {
  const depth0Arr = [];
  let minlog = 180;
  let minlat = 90;
  let maxlog = -180;
  let maxlat = -90;
  // 新改渲染逻辑
  if (pointPrimitiveCollection == null) {
    pointPrimitiveCollection = viewerRef.scene.primitives.add(new Cesium.PointPrimitiveCollection());
  }
  for (var i = 0; i < data.length; i++) {
    const item = data[i]
    var primitive = pointPrimitiveCollection.add({
      pixelSize: 5,
      color: Cesium.Color.fromCssColorString(getValueColor(item['value'])),
      position: Cesium.Cartesian3.fromDegrees(item['longitude'], item['latitude'], item['depth']),
      // scaleByDistance: new Cesium.NearFarScalar(50, 1.0, 5000, 0.4)
    });
    primitive.tooltip = `${item['value']}${dvalue.value}`;
    if (item['depth'] === 0) {
      depth0Arr.push(item)
    }
    if (item['longitude'] > maxlog) {
      maxlog = item['longitude']
    }
    if (item['longitude'] < minlog) {
      minlog = item['longitude']
    }
    if (item['latitude'] > maxlat) {
      maxlat = item['latitude']
    }
    if (item['latitude'] < minlat) {
      minlat = item['latitude']
    }
  }
  var data = [];
  let len = depth0Arr.length
  for (let i = 0; i < len; i++) {
    // 传进原始数据
    let dataItem = depth0Arr[i]
    data.push({
      lon: dataItem.longitude,
      lat: dataItem.latitude,
      value: dataItem.value
    })
  }
  if (heatmapInstance2 != null) {
    heatmapInstance2.removeDate();
    heatmapInstance2 = null;
  }
  heatmapInstance2 = new CesiumHeatMap3D(
    viewerRef,
    [minlog, minlat, maxlog, maxlat],
    {
      blur: 1,
      radius: 150,
      maxOpacity: 0.5,
      minOpacity: 0.01,
      gradient: {
        0.01: 'rgb(0,0,255)',
        0.33: 'rgb(0,255,0)',
        0.66: 'rgb(255,255,0)',
        1.0: 'rgb(255,0,0)'
      },
    },
    {
      baseHeight: 0,
      heightGradient: 0
    }
  );

  heatmapInstance2.setData(data, minValue.value, maxValue.value)
  // 移动摄像头位置
  setCameraPosition((maxlat - minlat) / 2 + minlat, (maxlog - minlog) / 2 + minlog)
}

// 清除全部内容
const resetAllEntity = () => {
  document.querySelector('#heatMap').innerHTML = ''
  viewerRef.entities.removeAll();
  if (pointPrimitiveCollection != null) {
    pointPrimitiveCollection.removeAll();
  }
}

const params = {lat1: 14, lat2: 15, lon1: 114, lon2: 115};
// 盐度api
const getSaltInfo = async () => {
  resetAllEntity()
  dvalue.value = "‰"
  maxValue.value = 37
  minValue.value = 33
  let { data } = await saltDataList(params)
  setEntityAndReturnDepth0(data);
}
// 温度api
const getTempInfo = async () => {
  resetAllEntity()
  dvalue.value = "°C"
  maxValue.value = 40
  minValue.value = 0
  let { data } = await tempDataList(params)
  setEntityAndReturnDepth0(data);
}
// 声速api
const getSoundInfo = async () => {
  resetAllEntity()
  dvalue.value = "m/s"
  maxValue.value = 1570
  minValue.value = 1400
  let { data } = await soundDataList(params)
  setEntityAndReturnDepth0(data);
}
// 声速api
const getFlowInfo = async () => {
  resetAllEntity()
  dvalue.value = "g/m^3"
  maxValue.value = 1060
  minValue.value = 1000
  let { data } = await densityDataList(params)
  setEntityAndReturnDepth0(data);
}
// cesium 缩放
const handleZoom = (zoom) => {
  // 获取当前镜头位置的笛卡尔坐标
  let cameraPos = viewerRef.camera.position

  // 获取当前坐标系标准
  let ellipsoid = viewerRef.scene.globe.ellipsoid

  // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
  let cartographic = ellipsoid.cartesianToCartographic(cameraPos)

  // 获取镜头的高度
  let height = cartographic.height

  // 根据上面当前镜头的位置，获取该中心位置的经纬度坐标
  let centerLon = parseFloat(Cesium.Math.toDegrees(cartographic.longitude).toFixed(8))
  let centerLat = parseFloat(Cesium.Math.toDegrees(cartographic.latitude).toFixed(8))

  // 镜头
  viewerRef.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, height * zoom),
    duration: 1.0
  })
}

// export
const getSalt = () => {
  getSaltInfo()
}
const getTemp = () => {
  getTempInfo()
}
const getSound = () => {
  getSoundInfo()
}
const getFlow = () => {
  getFlowInfo()
}
const cesiumPlus = () => {
  handleZoom(0.556)
}
const cesiumSub = () => {
  handleZoom(1.8)
}
const cesiumMeasure = () =>{
  measureLineSpace(viewerRef,Cesium)
}
const getViewerRef = () => {
  return viewerRef
}
defineExpose({
  getSalt,
  getTemp,
  getSound,
  getFlow,
  cesiumPlus,
  cesiumSub,
  dvalue,
  maxValue,
  minValue,
  cesiumMeasure,
  getViewerRef
})
</script>

<template>
  <div class="box-container">
    <div id="cesiumContainer" class="cesium-container"></div>
    <div id="heatMap"></div>
    <div class="">
      <div>单位：{{dvalue}}</div>
    </div>
  </div>

</template>

<style scoped>
:deep(.cesium-popup) {
  z-index: 9999;
}
:deep(.cesium-popup .cesium-popup-background) {
  background: rgba(63, 72, 84, 0.9);
}

:deep(.cesium-popup .cesium-popup-color) {
  color: #ffffff;
}
:deep(.cesium-popup .cesium-popup-content) {
  box-sizing: border-box;
  padding: 10px;
  line-height: 1.4;
  font-size: 13px;
  max-width: 800px;
  min-width: 50px;
}
:deep(.cesium-popup .w-auto) {
  width: auto;
}

.box-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.cesium-container {
  width: 100%;
  height: 100%;
  background-color: black;
}
#heatMap {
  width: 10000px;
  height: 10000px;
}
</style>
